<template>
	<view class="">
		<view class="u-flex u-f-jsb pt24 pb24 p12" style="background: #2e7233;">
			<view style="background:#64b368;color: #fff;"
				class="brs8 u-flex mr5 p6 h54 u-f1 u-f-justify u-font-bold fz20" @click="toPage('/pages/community/my')">
				{{userInfo.point || 0}}
			</view>
			<view @click="toPage('/pages/point/list')" style="background:#64b368"
				class="fz14 brs8 u-flex ml5 p6 h54 u-f1 u-f-justify c255">
				积分明细<u-icon name="arrow-right" class="ml4"></u-icon>
			</view>
		</view>
		<view class="p12">
			<view class="mb40">
				<view class="u-flex u-f-jsb mb20" @click="toPage('/pages/point/draw')">
					<span class="u-font-bold fz14">积分抽奖</span>
					<span class="u-flex fz12 c6">
						抽奖记录
						<u-icon name="arrow-right"></u-icon>
					</span>
				</view>
				<xlPrize ref="xlPrize" :award="award" @changePrize="changePrize">
				</xlPrize>

				<view class="btn-chou fz14 u-font-bold c255 u-flex u-f-justify" @click="toStart">{{userInfo.oneExchangePoint}}积分抽一次
				</view>
			</view>
			<view class="u-font-bold fz14 mb12">积分兑换</view>
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view @click="toProduct(item)" class="demo-warter pr6" v-for="(item, index) in leftList"
						:key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl"
							:index="index"></u-lazy-load>
						<view class="pt10 pb16">
							<view class="fz14 u-font-bold u-line-2">{{item.name}}</view>
							<view class="u-flex u-f-jsb mt10">
								<view class="u-flex fz12 c9">
									<span class="fz14 u-font-bold" style="color: #70B52C;">{{item.point}}</span>积分<span
										v-if="item.price">+<span class="fz14 u-font-bold"
											style="color: #70B52C;">{{item.price}}</span>元</span>
								</view>
								<view class="u-flex fz12 c9">
									库存：{{item.stock}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view @click="toProduct(item)" class="demo-warter pr6" v-for="(item, index) in rightList"
						:key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl"
							:index="index"></u-lazy-load>
						<view class="pt10 pb16">
							<view class="fz14 u-font-bold u-line-2">{{item.name}}</view>
							<view class="u-flex u-f-jsb mt10">
								<view class="u-flex fz12 c9">
									<span class="fz14 u-font-bold" style="color: #70B52C;">{{item.point}}</span>积分<span
										v-if="item.price">+<span class="fz14 u-font-bold"
											style="color: #70B52C;">{{item.price}}</span>元</span>
								</view>
								<view class="u-flex fz12 c9">
									库存：{{item.stock}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>

		</view>
		
		<u-popup v-model="showTips" mode="center" border-radius="20" :closeable="false">
			<view class="p20 pt40" style="width: 600rpx;">
				<image :src="prizeData.picUrl"
					style="display: block;margin: 0 auto;width:160rpx;height: 160rpx;"></image>
				<view class="fz16 p15 u-font-bold" style="text-align: center;color: #70B52C;">
					{{prizeData.winTitle}}
		
		
				</view>
				<button class="bon" @click="showTips=false">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import xlPrize from '@/components/xl-prize/xl-prize.vue'
	export default {
		components: {
			xlPrize
		},
		data() {
			return {
				showTips:false,
				userInfo: {},
				curTab: 1,
				loadStatus: 'loadmore',
				flowList: [],
				prizeData:{},
				award: [],
				list: []
			}
		},
		onShow() {
			this.initData();

				this.init()

				this.$api.pointExchangeConfig({}, res => {
					if (res.code == 200) {
						this.award = res.data.list
					}
				})

		},

		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toStart(){
				this.$refs.xlPrize.clickLuck()
			},
			init() {

				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.isLogin = true
						this.userInfo = res.data;
					}
				})
			},
			changePrize(e) {
				this.prizeData=e
				this.showTips=true
				this.init()
			},
			toProduct(item) {
				uni.navigateTo({
					url: '/pages/point/product?id=' + item.id
				})
			},

			initData() {
				this.page = 1
				this.flowList = []
				this.getData()

			},
			getData() {
				this.$api.productSearch({
					pageNo: this.page,
					pageSize: 10,
					categoryId: 24
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}

		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	
	
	.bon {
		width: 100%;
		background: #70B52C;
		padding: 15rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}
	
	.user-info {
		width: 232rpx;
		background: rgba(25, 41, 28, 0.05);
	}

	.module-search {
		flex: 1;
		background: rgba(25, 41, 28, 0.05);
	}

	.btn-chou {
		width: 520rpx;
		height: 96rpx;
		line-height: 96rpx;
		margin: 30rpx auto 0;
		background: #70B52C;
		border-radius: 16rpx;
	}
</style>